<template>
   <div class="home" >
     <div style="margin-top:25px">
      <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in imgarr" :key="item">
       
      <h3 text="2xl" justify="center"> <img :src="item" alt=""></h3>
    </el-carousel-item>
  </el-carousel>
     </div>
     <div style="display:flex;margin-top: 50px;" >
      <div>
      <div id='showorders' style='width:600px; height:400px'></div>
     </div>
     <div style="margin-left:150px">
      <div id='bing' style='width:600px; height:400px'></div>
     </div>
     </div>
     
   </div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as echarts from 'echarts';
onMounted(
  () => {
    init()
  }
)
export default {
    data(){
      return {
        imgarr:[
        'https://img0.baidu.com/it/u=1374282253,3644141087&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=500',

'https://img0.baidu.com/it/u=157772357,2824710361&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=375',

'https://img2.baidu.com/it/u=1197512903,781794803&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=375',
'https://img0.baidu.com/it/u=2608902827,1300274731&fm=253&fmt=auto&app=138&f=JPEG?w=582&h=300'
     ]
      }
    },
    methods:{
        showorders(){
            // 基于准备好的dom，初始化echarts实例
            var chartDom = document.getElementById('showorders');
            var myChart = echarts.init(chartDom);
            // 指定图表的配置项和数据
            var option;
 
            option = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: '数据报表'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['项目完成度', '项目跟进率', '项目费用支出', '项目负责程度', '项目发展']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['1月-2月', '3月-4月', '5月-6月', '7月-8月', '9月-10月', '11月-12月']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '项目完成度',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: '项目跟进率',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: '项目费用支出',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: '项目负责程度',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: '项目发展',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
};
            option && myChart.setOption(option);
           
        },
        showorders2(){
          var bing = document.getElementById('bing');
          var bing = echarts.init(bing);
          var option2;
          option2 = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '今日订餐人数占比' },
        { value: 735, name: '今日订餐总价占比' },
        { value: 580, name: '订餐推荐购买占比' },
        { value: 484, name: '推荐订餐总价占比' },
        { value: 300, name: '上新菜品购买占比' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
option2 && bing.setOption(option2);
        }


        },
    mounted() {
        this.showorders();
        this.showorders2();

    },
 
}

</script>

<style scoped>

.box{
     display: flex;
     position: relative;
     
}
    .block{
        width: 25%;
        margin: 0  30px;
        height: 150px;
        /* background-color: rgb(226, 226, 226); */
        background-color:   #c6e2ff;
       /* flex-wrap: wrap; */
       border-radius: 10px;
       color: rgb(85, 84, 84);
    }


    .demo-type {
  display: flex;
  height: 80px;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  /* line-height: 200px; */
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 img{
  width: 665px
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  margin-top: 20px;
  /* width: 650px; */
}
.tankuang{
    height: 30px;
    width: 80px;
    background-color: red;
    position: absolute;
    top:-15px;
   left: 50px;
    border-radius: 8px;
    color: #f5f5f5;
    text-align: center;
}
</style>